<script setup>
import { useCartStore } from '@/stores/cartStore.js'
import CartTable from '@/views/cart/components/CartTable.vue'
import { useUserStore } from '@/stores/userStore.js'
import { delCartApi } from '@/api/cart.js'
import { getShoppingCartApi } from '@/api/goods.js'

const cartStore = useCartStore()
const userStore = useUserStore()
const getCartList = async () => {
  if (!userStore.user) {
    return
  }
  const res = await getShoppingCartApi(userStore.user.uid)
  cartStore.cartList = res.data
}
/**
 * 删除购物车
 * @param row 删除数据
 */
const handleDel = (row) => {
  const res = delCartApi(userStore.user.uid, row.proId, row)
  // 重新获取购物车数据
  getCartList()
}
</script>

<template>
  <div v-if="userStore.user" class="cart-box">
    <div v-if="cartStore.cartList" class="cart">
      <CartTable :cart-data="cartStore.cartList" @del-cart="handleDel"></CartTable>
    </div>
    <div v-else>
      <el-icon color="#39c5bb" size="180">
        <ShoppingTrolley />
      </el-icon>
      <h2 style="color: #cccccc">这里什么都没有哟~</h2>
    </div>
  </div>
  <div v-else class="cart-box"><el-empty :description="'请先登录哟~'"></el-empty></div>
</template>

<style lang="scss" scoped>
.cart-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  flex-direction: column;

  .cart {
    width: 80%;
    height: 90vh;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;

    &-item {
      width: 95%;
    }
  }
}
</style>